<template>
  <el-container>
    <el-header>
      <h2>编辑问题</h2>
    </el-header>

    <el-main>
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="问题内容" prop="description" :rules="[{ required: true, message: '请输入问题内容', trigger: 'blur' }]">
          <el-input v-model="form.description" placeholder="请输入问题内容" />
          </el-form-item>
          <el-form-item label="分值" prop="point" :rules="[{required :true, message:'请输入他的分值',trigger: 'blur'}]">
            <el-input v-model="form.point" placeholder="请输入问题分值"/>
        </el-form-item>
        <el-form-item label="答案" prop="answer" :rules="[{required :true, message:'请输入他的答案',trigger: 'blur'}]">
          <el-input v-model="form.answer" placeholder="请输入问题答案"/>
        </el-form-item>
        <el-form-item label="选项A" prop="choices" :rules="[{required :true, message:'请输入选项A的内容',trigger: 'blur'}]">
          <el-input v-model="form.choices[0].description" placeholder="请输入选项A的内容"/>
        </el-form-item>
        <el-form-item label="选项B" prop="choices" :rules="[{required :true, message:'请输入选项B的内容',trigger: 'blur'}]">
          <el-input v-model="form.choices[1].description" placeholder="请输入选项B的内容"/>
        </el-form-item>
        <el-form-item label="选项C" prop="choices" :rules="[{required :true, message:'请输入选项C的内容',trigger: 'blur'}]">
          <el-input v-model="form.choices[2].description" placeholder="请输入选项C的内容"/>
        </el-form-item>
        <el-form-item label="选项D" prop="choices" :rules="[{required :true, message:'请输入选项D的内容',trigger: 'blur'}]">
          <el-input v-model="form.choices[3].description" placeholder="请输入选项D的内容"/>
        </el-form-item>
        <el-form-item label="章节ID" prop="sectionId" :rules="[{required :true, message:'请输入他的章节ID',trigger: 'blur'}]">
          <el-input v-model="form.sectionId" placeholder="请输入章节ID"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
          <el-button @click="cancelForm" style="margin-left: 10px;">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {ref, onMounted, reactive} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { page, saveProblem } from '@/api/problem';
import router from "../router/index.js";

export default {
  methods: {
    router() {
      return router
    }
  },
  setup() {

    const choice = ref([
      {
        choiceChar:'A',
        description:''
      },
      {
        choiceChar:'B',
        description:''
      },
      {
        choiceChar:'C',
        description:''
      },
      {
        choiceChar:'D',
        description:''
      }
    ]);const form = reactive({
      description: '',
      point:'',
      choices: choice,
      answer:'',
      sectionId:'',
      status:'1',
      type:'1',
      image:'',
    });
    const loading = ref(false);
    const router = useRouter();
    const route = useRoute();


    // 加载问题详情（用于编辑）


    const submitForm = async () => {
      loading.value = true;
      try {
        await saveProblem(form);
        await router.push('/problems');
      } catch (error) {
        console.error('保存失败', error);
      } finally {
        loading.value = false;
      }
    };

    const cancelForm = () => {
      router.push('/problems');
    };

    onMounted(() => {
      console.log(route.params.id)
    });

    return {
      form,
      loading,
      submitForm,
      cancelForm,
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: white;
  padding: 10px;
  text-align: center;
}

h2 {
  margin: 0;
}

.el-main {
  padding: 20px;
}
</style>
